import React from "react";
import PageTitle from "component/page-title";
import CategorySelector from "./category-selector";

import "./save.scss";
import Product from "@/service/product-service.jsx";
import Mutils from "@/utils/index.jsx";

const _product = new Product();
const _mm = new Mutils();

class ProductDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pid: this.props.match.params.pid,
      name: "",
      subtitle: "",
      categoryId: 0,
      parentCategoryId: 0,
      subImages: [],
      price: "",
      stock: "",
      detail: "",
      status: 1 // 商品状态1在售
    };
  }
  componentDidMount() {
    this.loadProduct();
  }
  loadProduct() {
    // 有pid编辑，表单回填
    if (this.state.pid) {
      _product.getProduct(this.state.pid).then(
        res => {
          res.data.subImages = res.data.subImages
            ? res.data.subImages.split(",").map(img => {
                return {
                  uri: img,
                  url: res.data.imageHost + img
                };
              })
            : [];
          this.setState(res.data);
        },
        err => {
          _mm.errorTips(err);
        }
      );
    }
  }

  render() {
    const {
      name,
      subtitle,
      price,
      stock,
      categoryId,
      parentCategoryId,
      detail
    } = this.state;
    return (
      <div id="page-wrapper">
        <PageTitle title={"商品详情"} />
        <div className="form-horizontal">
          <div className="form-group">
            <label className="col-sm-2 control-label">商品名称</label>
            <div className="col-sm-5">
              <input
                type="text"
                className="form-control"
                placeholder="请输入商品名称"
                name="name"
				value={name}
				readOnly
              />
            </div>
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label">商品描述</label>
            <div className="col-sm-5">
			  <input 
			  		type="text"
				  className="form-control" 
				  value={subtitle}
				  readOnly
			  />
            </div>
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label">所属分类</label>
            <CategorySelector
				readOnly
                categoryId={categoryId}
                parentCategoryId={parentCategoryId}
            />
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label">商品价格</label>
            <div className="col-sm-3">
              <div className="input-group">
                <input
                  type="number"
                  min="0"
                  className="form-control"
                  placeholder="请输入商品价格"
                  name="price"
				  value={price}
				  readOnly
                />
                <span className="input-group-addon">元</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label">商品库存</label>
            <div className="col-sm-3">
              <div className="input-group">
                <input
                  type="number"
                  min="0"
                  className="form-control"
                  placeholder="请输入商品库存"
                  name="stock"
                  value={stock}
                  readOnly
                />
                <span className="input-group-addon">件</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label">商品图片</label>
            <div className="col-sm-10">
              {this.state.subImages.length ? (
                this.state.subImages.map((v) => {
                  return (
                    <div className="imgWrapper" key={v.url}>
                      <img src={v.url} />
                    </div>
                  );
                })
              ) : (
                <div>暂无图片</div>
              )}
            </div>
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label">商品详情</label>
            <div className="col-sm-10" dangerouslySetInnerHTML={{__html:this.state.detail}} />
          </div>
        </div>
      </div>
    );
  }
}
export default ProductDetail;
